<template>
<div class="container">
  <headers title="佣金" :refresh="isRefresh" path="/home"></headers>
  <div class="content">
    <v-tabs type="tab" @tabchange="tabChange">
      <v-tab name="daifa" title="待发" status="active">
        <div class="list-block media-list no-margin mar-top-5">
          <ul>
            <li class="item-link item-content" v-for="task in taskData">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title color-light">任务ID：{{task.id}}</div>
                  <div class="item-after"></div>
                </div>
                <div class="item-title-row">
                  <div class="item-title color-black">接收{{task.voteTypeName}}任务，并完成</div>
                  <div class="item-after color-danger"><i class="icon-yongjin icon-coin"></i>&nbsp;{{task.bowlerGold}}</div>
                </div>
                <div class="item-title-row">
                  <div class="item-title color-light">时间：{{task.completeDateView}}</div>
                  <div class="item-after"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </v-tab>
      <v-tab name="yifa" title="已发">
        <div class="list-block media-list no-margin mar-top-5">
          <ul>
            <li class="item-link item-content" v-for="task in taskData">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title color-light">任务ID：{{task.id}}</div>
                  <div class="item-after"></div>
                </div>
                <div class="item-title-row">
                  <div class="item-title color-black">接收{{task.voteTypeName}}任务，并完成</div>
                  <div class="item-after color-danger"><i class="icon-yongjin icon-coin"></i>&nbsp;{{task.bowlerGold}}</div>
                </div>
                <div class="item-title-row">
                  <div class="item-title color-light">时间：{{task.completeDateView}}</div>
                  <div class="item-after"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </v-tab>
    </v-tabs>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/buhege', replace: true}">
      <span class="icon icon2 buhege-icon"></span>
      <span class="tab-label">不合格任务</span>
    </a>
  </nav>
</div>
</template>

<script>
import {loader} from '../util/util'
import $ from 'zepto'
import Headers from '../components/Headers'
import VTabs from '../components/Tabs'
import VTab from '../components/Tab'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getTaskData()
  },
  data () {
    return {
      isRefresh: true,
      taskData: [],
      taskStatus: 0
    }
  },
  methods: {
    tabChange (index) {
      this.$set('taskData', [])
      this.$set('taskStatus', index)
      this.getTaskData()
    },
    getTaskData () {
      loader.show()
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomerCommision', {
        params: {
          status: this.taskStatus,
          customerId: store('customerId') || 0
        }
      }).then((data) => {
        // console.log(data)
        this.$set('taskData', data.data.rows)
        setTimeout(() => {
          loader.hide()
        }, 500)
      }, () => {
        loader.hide()
        $.alert('网络异常')
      })
    }
  },
  components: {
    Headers,
    VTabs,
    VTab
  }
}
</script>
<style scoped>
.icon-yongjin.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
</style>